<template>
  <div class="choujiangye">
    <div class="headera">
      <div class="yugao">
        <img src="../assets/116.png" alt="" class="yugaotu" />
      </div>
      <div class="tanxing">
        <div class="makebei">
          <div class="biankuang">
            <div
              class="kapianb"
              v-for="(fuli, key) in fuliList"
              :key="fuli.lottery_id"
              :class="key === index ? 'active' : ''"
            >
              <div class="shitou">
                <img :src="fuli.lottery_image" alt="" class="shitoua" />
              </div>
              {{ fuli.lottery_name }}
            </div>
            <div class="lotteryBtn" @click="lotteryBtn">点我立即抽奖</div>
            <div class="switch">switch中奖概率高达30%</div>
          </div>
        </div>
        <div>
          <div class="lunbotu">
            <div class="weiguan">围观大奖</div>

            <div class="xunhuan">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="(item, index) in result"
                    :key="index"
                  >
                    <div
                      class="juejina"
                      v-for="item in item"
                      :key="item.user_name"
                    >
                      <div class="juejinb">
                        <img :src="item.lottery_image" alt="" class="juejinc" />
                      </div>
                      <div>{{ item.lottery_name }}</div>
                      <!--  <div>{{item.user_name}}</div> -->
                    </div>
                  </div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-pagination"></div>
              </div>
            </div>
          </div>
          <div class="gundong">
            <div class="gundonga">中奖播报</div>
            <div id="test">
              <template
                ><vue-seamless-scroll
                  :data="bobaoList"
                  class="seamless-warp"
                  :class-option="classOption"
                >
                  <ul>
                    <li v-for="item in bobaoList" :key="(item + 10).date">
                      恭喜-- <span>{{ item.user_name }}</span> --抽中--
                      <span>{{ item.lottery_name }}</span>
                    </li>
                  </ul></vue-seamless-scroll
                ></template
              >
              <div id="test2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import Swiper from "swiper";
import "swiper/css/swiper.css";

export default {
  name: "choujiang",
  data() {
    return {
      fuliList: [],
      jiangpingList: [],
      bobaoList: [],
      index: -1, //滚动下标
      times: 1, //滚动次数（每一个方格为一次）
      cycle: 50, //循环滚动的次数
      speed: 200, //转动速度
      result: [],
    };
  },
  mounted() {
    this.getTime();
    this.$nextTick(() => {
      setTimeout(() => {
        new Swiper(".swiper-container", {
          /*   slidesPerView: 3,
      spaceBetween: 3,
        slidesPerGroup: 1, */
          autoplay: true, //自动播放
          loop: true, // 循环模式选项
          speed: 900,
          delay: 1000,
          disableOnInteraction: false,

          //init: false,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
        });
      }, 1000);
    });
  },
  methods: {
    async getTime() {
      const res = await this.$API.singnatrue.getTime();
      console.log(res);
      this.fuliList = res.lottery.lottery_list;
      this.jiangpingList = res.lotteries;
      this.result = this.arrList();
      console.log(this.result);
      console.log(this.jiangpingList);
      this.bobaoList = res.user.users;
      // console.log(this.fuliList);
      // console.log(this.jiangpingList);
      console.log(this.bobaoList);
    },
    getRandom(n, m) {
      //该方法能产生[n,m]之间随机数
      let result = Math.floor(Math.floor(Math.random() * (m - n + 1) + n));
      return result;
    },
    getNumber() {
      let number = this.getRandom(0, 10);
      let caseNum = "";
      if (number === 0) {
        caseNum = 0; //粗略概率为10%
      } else if (number > 0 && number < 2) {
        caseNum = 1; //粗略概率为20%
      } else if (number >= 2 && number < 4) {
        caseNum = 2; //粗略概率为20%
      } else if (number >= 4 && number < 7) {
        caseNum = 3; //粗略概率为30%
      } else {
        caseNum = 4; //百分之20
      }
      return caseNum;
    },
    lotteryBtn: function () {
      console.log("点击");
      this.startRoll();
      this.index = -1;
      this.speed = 200;
      this.times = 1;
    },
    roll: function () {
      var index = this.index;
      var count = this.fuliList.length; //总长度
      index += 1;
      if (index > count - 1) {
        index = 0;
      }
      this.index = index;
    },
    startRoll: function () {
      this.times += 1;
      this.roll();
      if (this.times > this.cycle + 20) {
        clearTimeout(timer); //清除延迟函数
        this.times = 0;
      } else {
        if (this.times < this.cycle + 20) {
          this.speed -= 10; //加快转动速度
        } else if (this.times >= this.cycle) {
          this.speed += 20;
          // var ind = parseInt(Math.random() * 4, 0) || 0; // 随机产生一个中奖号码
          var ind = this.getNumber();

          console.log(ind);
          this.index = ind;
        }
        var timer = setTimeout(this.startRoll, this.speed);
      }
    },
    arrList() {
      const data = this.jiangpingList;
      const result = [];
      for (let i = 0; i < data.length; i += 3) {
        result.push(data.slice(i, i + 3));
      }
      return result;
    },
  },

  components: {
    //组件
    vueSeamlessScroll,
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: this.bobaoList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>

<style lang="less" scoped>
.choujiangye {
  width: 900px;
  height: 900px;
  /*   border: 1px solid black; */
}
.headera {
  width: 900px;
  height: 800px;
  /*  border: 1px solid red; */
  /* background-size: 100%,100%;
  background-image: url(../assets/119.jpg); */
}
.yugao {
  width: 900px;
  height: 300px;
}
.yugaotu {
  width: 100%;
  height: 100%;
}
.makebei {
  width: 450px;
  height: 450px;
  border: 20px solid pink;
  margin-left: 15px;
}
.biankuang {
  width: 400px;
  height: 400px;
  border: 25px solid blue;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.kapianb {
  margin-left: 10px;
  width: 120px;
  height: 120px;
  /*  border: 1px solid red; */
  text-align: center;
  margin-top: 10px;
}
.shitou {
  width: 60px;
  height: 60px;
  margin-left: 30px;
  margin-top: 20px;
}
.shitoua {
  width: 60px;
  height: 60px;
}
.lunbotu {
  width: 400px;
  height: 200px;
  /*   border: 1px solid red; */
}
.tanxing {
  display: flex;
}
.weiguan {
  width: 100px;
  height: 60px;
  text-align: center;
  font-size: 20px;
  color: blue;
  line-height: 60px;
}
.xunhuan {
  width: 350px;
  height: 120px;
  border: 1px solid red;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}
.juejina {
  width: 80px;
  height: 80px;
  /*   border: 1px solid red; */
  margin-left: 30px;
  flex-shrink: 0;
}
.juejinb {
  width: 40px;
  height: 40px;
}
.juejinc {
  width: 100%;
  height: 100%;
}
.gundong {
  width: 400px;
  height: 200px;
  /* border: 1px solid red; */
  overflow: hidden;
}
.gundonga {
  width: 100px;
  height: 50px;
  font-size: 20px;
  color: blue;
  /*   border: 1px solid red; */
  line-height: 50px;
}
.seamless-warp {
  width: 100%;
  height: calc(100% - 16px);
  overflow: hidden;

  ul {
    margin: 0;
    padding: 0;
  }
  li {
    color: red;
  }
  span {
    color: blue;
  }
}
.lotteryBtn {
  width: 100px;
  height: 100px;
  font-size: 30px;
  color: blue;
  text-align: center;
  background-color: red;
  margin-left: 20px;
  margin-top: 20px;
}
.active {
  color: red;
}
.switch {
  width: 260px;
  height: 100px;
  font-size: 22px;
  line-height: 100px;
  color: red;
}
.swiper-container {
  width: 330px;
}
.swiper-wrapper {
  width: 330px;
}
.shiyan {
  height: 400px;
  width: 900px;
  border: 1px solid red;
}
/* .shiyana{
  width:300px;
  height:300px;
} */
.swiper-slide {
  margin-top: 20px;
  width: 330px;
  display: flex;
}
</style>